import React, { useContext, useEffect, useRef, useMemo } from 'react';
import { Tooltip, Popover, Checkbox, Button, Space } from 'antd';
import Container, { ColumnsStateMap } from '../../container';
import { SettingOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/lib/table/interface';
import { genColumnKey } from '../../utils';

type ColumnsSettingTitleProps = {
  isAllSelect?: Boolean | any;
  actions: {
    setAllSelectAction: (show: boolean) => void;
    resetColumnsState: () => void;
  };
};
const ColumnsSettingTitle = ({
  isAllSelect = false,
  actions,
}: ColumnsSettingTitleProps) => {
  const { setAllSelectAction, resetColumnsState } = actions;

  return (
    <div>
      <Checkbox
        checked={isAllSelect}
        onChange={(e) => {
          if (e.target.checked) {
            setAllSelectAction(true);
          } else {
            setAllSelectAction(false);
          }
        }}
      >
        列展示
      </Checkbox>
      <Button
        type="link"
        onClick={() => {
          resetColumnsState();
        }}
      >
        重置
      </Button>
    </div>
  );
};
type ColumSettingContentProps = {
  basicColumns: ColumnsType;
  columnsStateMap: ColumnsStateMap;
  actions: {
    setColumnsStateMap: Function;
  };
};
const ColumnsSettingContent = ({
  basicColumns,
  columnsStateMap,
  actions: { setColumnsStateMap },
}: ColumSettingContentProps) => {
  return basicColumns.map(({ key = '', title }) => {
    if (!key) {
      return;
    }
    return (
      <div key={key}>
        <Checkbox
          checked={columnsStateMap[key]?.show}
          onChange={(e) => {
            if (e.target.checked) {
              columnsStateMap[key].show = true;
            } else {
              columnsStateMap[key].show = false;
            }
            setColumnsStateMap(Object.assign({}, columnsStateMap));
          }}
        >
          {title}
        </Checkbox>
        <Space>
          <Tooltip title="固定在左侧">
            <a>
              <VerticalAlignTopOutlined rotate={-90} />
            </a>
          </Tooltip>
          <Tooltip title="固定在右侧">
            <a>
              <VerticalAlignTopOutlined rotate={90} />
            </a>
          </Tooltip>
        </Space>
      </div>
    );
  });
};

const ColumSetting = () => {
  const {
    columnsStateMap,
    basicPropsRef,
    basicColumnsData,
    setColumnsStateMap,
  } = Container.useContainer();
  const columnStateRef = useRef({});
  const basicColumns = basicColumnsData.current;

  /**
   * 设置全部选中，或全部未选中
   *
   * @param show
   */
  const setAllSelectAction = (show: boolean = true) => {
    const columnKeyMap = {};
    basicColumns.forEach(({ key }) => {
      const columnKey = genColumnKey(key);
      if (columnKey) {
        columnKeyMap[columnKey] = {
          show,
        };
      }
    });
    setColumnsStateMap(columnKeyMap);
  };

  const resetColumnsState = () => {
    console.log('重置');
    // setColumnsStateMap();
  };

  // 选中的 key 列表
  const selectedKeys = Object.values(columnsStateMap).filter(
    (value) => !value || value.show === true,
  );
  console.log(Object.values(columnsStateMap), selectedKeys);
  // 是否已经全部选中
  const isAllSelect =
    selectedKeys.length > 0 && selectedKeys.length === basicColumns.length;

  return (
    <Popover
      title={ColumnsSettingTitle({
        isAllSelect,
        actions: { setAllSelectAction, resetColumnsState },
      })}
      content={ColumnsSettingContent({
        basicColumns,
        columnsStateMap,
        actions: {
          setColumnsStateMap,
        },
      })}
      trigger="click"
    >
      <Tooltip title="列设置" placement="top">
        <SettingOutlined />
      </Tooltip>
    </Popover>
  );
};

export default ColumSetting;
